<template>
	<div>
		<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick">
			<el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.value">
				<template v-if="activeName == item.value">
					<div class="tag-list flex" v-if="type == 1">
						<p v-for="(column, index) in BaseFormConfig.column" :key="index">
							<span class="tag-btn fc" v-if="column.label">{{ column.label }}</span>
						</p>
					</div>
					<template v-else-if="!isDetail">
						<AplidForm
							ref="formRef"
							:disabled="isDetail"
							:key="reloadForm"
							v-bind="BaseFormConfig"
							v-model="formModel"
							:showBtn="false"
							@change="handleItemChange"
						>
						</AplidForm>
					</template>
					<div class="nav-box" v-else>
						<div class="nav-item" v-for="(column, index) in BaseFormConfig.column" :key="index">
							<p class="text-label">{{ column.label }}</p>
							<FileList :value="formModel[column.prop]" />
						</div>
					</div>
				</template>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod'
import { md5 } from '@/utils/encdecrpt'
import FileList from '@/views/aplid/DetailPage/ContentListItem/FileList/index.vue'

type Props = {
	list: any
	type?: any
	params?: any
	applyNo?: string | number
	isDetail?: boolean
}
const props = withDefaults(defineProps<Props>(), {})
const emit = defineEmits(['refresh-change'])
const activeName = ref('')
const formModel = ref({})

const tabList = computed({
	get() {
		let data = []
		if (props.list) {
			data = Array.isArray(props.list) ? props.list : JSON.parse(props.list)
		}
		activeName.value = data[0]?.value
		return data
	},
	set() {},
})
const templateCaseInfo = computed({
	get: () => {
		return tabList.value.filter((item) => item.value === activeName.value)[0] || {}
	},
	set: (val) => {},
})

const formId = computed({
	get() {
		const str = [props.params?.organizationId, props.params?.belongDate?.replace('-', '').substring(0, 6), props.params?.subsidyProjectId]
			.filter(Boolean)
			.join('_')
		return props.applyNo || md5(str)
	},
	set() {},
})

const BaseFormConfig = ref({
	inline: false,
	column: [],
})
const reloadForm = ref(0)

const resultId = ref('')
const handleItemChange = (formMod, item, e) => {
	const baseApi = resultId.value ? 'view_formResults_edit' : 'view_formResults_add'
	apiMod[baseApi]({
		id: resultId.value,
		fromId: formId.value,
		tableTemplateId: activeName.value,
		dataContent: formMod.value,
	}).then((res) => {
		if (!resultId.value) resultId.value = res.data
		emit('refresh-change', formId.value)
	})
}
const getInitData = () => {
	if (!activeName.value) {
		return
	}

	apiMod.view_tableTemplate_id(activeName.value).then((res) => {
		const data = res.data || {}
		if (data.jsonStr?.column) {
			BaseFormConfig.value = data.jsonStr
			reloadForm.value = Math.random()
		}
	})

	let query: any = {
		tableTemplateId: activeName.value,
	}
	if (templateCaseInfo.value.result) {
		query.id = templateCaseInfo.value.result
	} else {
		query.fromId = formId.value
	}

	apiMod.view_formResults_getOne(query).then((res) => {
		const { dataContent, id } = res.data || {}
		formModel.value = dataContent
		resultId.value = id
	})
}

const handleTabClick = () => {
	getInitData()
}

onMounted(() => {
	getInitData()
})
</script>

<style scoped lang="scss">
.tag-list {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	gap: 10px;
	.tag-btn {
		padding: 4px 16px;
		height: 27px;
		border-radius: 6px;
		background: #fff5f7;
	}
}
.nav-box {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	padding: 15px;
	.nav-item {
		width: 45%;
		.text-label {
			font-size: 16px;
			font-weight: 600;
			padding: 4px 0;
		}
	}
}
</style>
